import { NavBar, Button, Card, Avatar } from "antd-mobile";
import { CalendarOutline } from "antd-mobile-icons";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import "./sy3.css";

function Sy3() {
  const navigate = useNavigate();
  const [selectedDate, setSelectedDate] = useState("today");

  // 日期标签数据
  const dateTabs = [
    { id: "all", label: "全部日期", date: "" },
    { id: "today", label: "周一 今日", date: "今日" },
    { id: "tuesday", label: "周二 29", date: "29" },
    { id: "wednesday", label: "周三 30", date: "30" },
    { id: "thursday", label: "周四 31", date: "31" },
    { id: "friday", label: "周五 1", date: "1" },
  ];

  // 不同日期的医生数据
  const doctorsData = {
    all: [
      {
        id: "1",
        name: "刘医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 20,
        status: "available",
      },
      {
        id: "2",
        name: "杨医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👩‍⚕️",
        available: 10,
        status: "available",
      },
      {
        id: "3",
        name: "刘医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 30,
        status: "available",
      },
      {
        id: "4",
        name: "章医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 0,
        status: "full",
      },
    ],
    today: [
      {
        id: "1",
        name: "刘医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 15,
        status: "available",
      },
      {
        id: "2",
        name: "杨医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👩‍⚕️",
        available: 8,
        status: "available",
      },
      {
        id: "4",
        name: "章医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 0,
        status: "full",
      },
    ],
    tuesday: [
      {
        id: "1",
        name: "刘医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 20,
        status: "available",
      },
      {
        id: "3",
        name: "刘医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 25,
        status: "available",
      },
      {
        id: "4",
        name: "章医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 5,
        status: "available",
      },
    ],
    wednesday: [
      {
        id: "2",
        name: "杨医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👩‍⚕️",
        available: 12,
        status: "available",
      },
      {
        id: "3",
        name: "刘医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 30,
        status: "available",
      },
    ],
    thursday: [
      {
        id: "1",
        name: "刘医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 18,
        status: "available",
      },
      {
        id: "2",
        name: "杨医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👩‍⚕️",
        available: 0,
        status: "full",
      },
      {
        id: "4",
        name: "章医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 8,
        status: "available",
      },
    ],
    friday: [
      {
        id: "1",
        name: "刘医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 22,
        status: "available",
      },
      {
        id: "2",
        name: "杨医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👩‍⚕️",
        available: 15,
        status: "available",
      },
      {
        id: "3",
        name: "刘医生",
        title: "副主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 28,
        status: "available",
      },
      {
        id: "4",
        name: "章医生",
        title: "主任医师",
        department: "门诊外一科",
        specialty: "擅长:肛肠外科(肛肠良性基本),结直肠微创手...",
        avatar: "👨‍⚕️",
        available: 0,
        status: "full",
      },
    ],
  };

  // 获取当前选中日期的医生数据
  const currentDoctors = doctorsData[selectedDate as keyof typeof doctorsData] || doctorsData.all;

  const handleDateTabClick = (dateId: string) => {
    setSelectedDate(dateId);
    console.log("选择日期:", dateId);

  };

  const handleDoctorClick = (doctor: any) => {
    console.log("选择医生:", doctor.name);      
    // 这里可以添加跳转到医生详情或预约页面的逻辑
    // navigate(`/doctor-detail/${doctor.id}`)
    
  };

  const handleAppointmentClick = (doctor: any, e: React.MouseEvent) => {
    e.stopPropagation();
    if (doctor.status === "available") {
      console.log("预约医生:", doctor.name);
      // 这里可以添加预约逻辑
    }
  };

  return (
    <div className="sy3-container">
      {/* 顶部导航栏 */}
      <NavBar onBack={() => navigate(-1)} className="sy3-navbar">
        医生列表
      </NavBar>

      {/* 页面内容 */}
      <div className="sy3-content">
        {/* 科室和日期选择区域 */}
        <div className="department-date-section">
          <div className="department-info">
            <span className="department-name">门诊外一科</span>
            <div className="date-info">
              <CalendarOutline fontSize={16} />
              <span className="date-text">2020年1月</span>
            </div>
          </div>
        </div>

        {/* 日期标签 */}
        <div className="date-tabs">
          {dateTabs.map((tab) => (
            <div
              key={tab.id}
              className={`date-tab ${selectedDate === tab.id ? "active" : ""}`}
              onClick={() => handleDateTabClick(tab.id)}
            >
              {tab.label}
            </div>
          ))}
        </div>

        {/* 医生列表 */}
        <div className="doctors-list">
          {currentDoctors.map((doctor) => (
            <Card
              key={doctor.id}
              className="doctor-card"
              onClick={() => handleDoctorClick(doctor)}
            >
              <div className="doctor-content">
                <div className="doctor-avatar">
                  <Avatar
                    src={doctor.avatar}
                    style={{ "--size": "60px", fontSize: "24px" }}
                  />
                </div>
                <div className="doctor-info">
                  <div className="doctor-header">
                    <div className="doctor-name-title">
                      <span className="doctor-name">{doctor.name}</span>
                      <span className="doctor-title">{doctor.title}</span>
                    </div>
                    <Button
                      className={`appointment-btn ${doctor.status}`}
                      size="small"
                      onClick={(e) => handleAppointmentClick(doctor, e)}
                      disabled={doctor.status === "full"}
                    >
                      {doctor.status === "available"
                        ? `余${doctor.available}号`
                        : "已约满"}
                    </Button>
                  </div>
                  <div className="doctor-department">{doctor.department}</div>
                  <div className="doctor-specialty">{doctor.specialty}</div>
                </div>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Sy3;
